<template>
  <div>
    <!--
        弹出框组件
        v-model="show"  // 控制是否显示对话框 true展示  false隐藏
        :show-confirm-button="false"  // 不显示 “确定” 按钮
        close-on-click-overlay // 点击旁处  关闭对话框

        @input:当前组件的value值发生变化，要传递给
        父组件的v-model里边去的,使得弹出框可以不断完成关闭、显示动作

        注意：
          $emit('input',$event)就这样配置，van-dialog内部已经把$event.target.value都集成好了
          如果当前标签是普通的input框标签，那么$emit('input',$event.target.value)两个参数就都需要设置全乎
    -->
    <!-- closed:是Dialog弹框组件提供的事件，关闭弹窗且动画结束后触发(@closed="isOneLevel=true" 使得一级弹框显示) -->
    <van-dialog
      :value="value"
      @input="$emit('input',$event)"
      :show-confirm-button="false"
      closeOnClickOverlay
      @closed="isOneLevel=true"
    >
      <!--
        van-cell单元格组件
        icon:图标
        title：标题内容
        is-link : 右侧箭头图标
        @click ：单击事件
      -->
      <!-- 一级弹框 -->
      <van-cell-group v-if="isOneLevel">
        <van-cell icon="location-o" title="不感兴趣" @click="articleDislike()" />
        <van-cell icon="location-o" title="反馈垃圾内容" is-link @click="isOneLevel=false" />
        <van-cell icon="location-o" title="拉黑作者" @click="lahei()" />
      </van-cell-group>

      <!-- 二级弹框 -->
      <!--
        van-cell单元格组件
          icon="arrow-left"  左侧箭头图标
          @click ：单击事件
      -->
      <van-cell-group v-else>
        <van-cell icon="arrow-left" @click="isOneLevel=true" />
        <van-cell
          v-for="item in reportsList"
          :key="item.value"
          :title="item.title"
          icon="location-o"
          @click="articleReport(item.value)"
        />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script type="text/javascript">
// 导入处理不感兴趣文章的api函数
// 导入举报文章的api函数
import { apiArticleDislike, apiArticleReport } from '@/api/article.js'

export default {
  name: 'more-action',
  // 子组件接收父组件传递过来的v-model的值,  articleID:不感兴趣文章的id
  // props: ['value', 'articleID'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    articleID: {
      type: String,
      default: '',
      required: true
    }
  },
  data () {
    return {
      isOneLevel: true, // 判断展示一级 或 二级 反垃圾内容 true:一级  false:二级
      // 文章举报列表明细
      reportsList: [
        { title: '其他问题', value: 0 },
        { title: '标题夸张', value: 1 },
        { title: '低俗色情', value: 2 },
        { title: '错别字多', value: 3 },
        { title: '旧闻重复', value: 4 },
        { title: '广告软文', value: 5 },
        { title: '内容不实', value: 6 },
        { title: '涉嫌违法犯罪', value: 7 },
        { title: '侵权', value: 8 }
      ]
    }
  },
  methods: {
    // 1.处理不感兴趣文章的函数
    async articleDislike () {
      // 调用api，正常情况成功率是100%，因此不用设置try/catch
      await apiArticleDislike(this.articleID)
      // console.log(result)
      // 成功提示
      this.$toast.success('处理成功')
      // 弹框消失
      // 关闭弹出框，修改父组件的showDialog的值为false，进而影响子组件关闭弹框
      this.$emit('input', false)
      // 调用自己的 dislikeSuccess 事件，完成页面文章删除功能
      this.$emit('dislikeSuccess')
    },

    // 2.对“拉黑作者”的处理
    async lahei () {
      await apiArticleDislike(this.articleID)
      this.$toast.success('拉黑成功')
      this.$emit('input', false)
      this.$emit('dislikeSuccess')
    },

    // 3. 举报文章的函数
    async articleReport (type) {
      // 发请求，调用api
      // type:是对象成员简易赋值type:type
      // 文章举报要么成功、要么失败(文章被重复举报)，所以try/catch要介入
      // 重复举报的文章会返回409的错误状态码，api函数就停止了，后续代码就不执行了，是致命错误
      // 所以不能使用if语句，需使用try、catch(虽然会捕捉到错误信息，但代码还会往下执行)
      try {
        const obj = { articleID: this.articleID, type }
        await apiArticleReport(obj)
      } catch (err) {
        if (err.response.status === 409) {
          // return：停止后续代码执行(try/catch里，可以使用return)
          return this.$toast.fail('文章已经被举报过了')
        } else {
          return this.$toast.fail('文章举报失败')
        }
      }
      // 举报成功的操作
      // 提示信息
      this.$toast.success('文章举报成功')
      // 关闭弹框(给父组件传递一个false，关闭弹框)
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped lang="less" >
</style>
